<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="上下班" name="dutya"  :tabActiveName="isComponent"></el-tab-pane>
				<el-tab-pane label="外出" name="dutyb"></el-tab-pane>
				<el-tab-pane label="请假" name="dutyc"></el-tab-pane>
				<el-tab-pane label="出差" name="dutyd"></el-tab-pane>
				<el-tab-pane label="加班" name="dutye"></el-tab-pane>
				<el-tab-pane label="值班" name="dutyf"></el-tab-pane>
				<el-tab-pane label="考勤" name="dutyg"></el-tab-pane>
			</el-tabs>
		</el-header>
		<component :is="isComponent"/>
	</el-container>
</template>

<script>
import dutya from './dutyrecorda'
import dutyb from './dutyrecordb'
import dutyc from './dutyrecordc'
import dutyd from './dutyrecordd'
import dutye from './dutyrecorde'
import dutyf from './dutyrecordf'
import dutyg from './dutyrecordg'
export default {
	name: 'My Attend Record',
	components: {
		dutya,
		dutyb,
		dutyc,
		dutyd,
		dutye,
		dutyf,
		dutyg
	},
	data() {
		return {
			groupId:"dutya",
			isComponent:"dutya"
		}
	},
	methods: {
		tabChange(name){
			this.isComponent = name;
		},
	}
}
</script>

<style>
</style>
